<template >
  <div class="config">
    <div class="configMainSearcch">
      <div class="searchContent">
        <el-form :inline="true" :model="queryForm" size="mini">
          <el-form-item label="配置名称">
            <el-input v-model="queryForm.configName" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="queryForm.configTitle" :min="0" :max="10" controls-position="right" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button type="warning" @click="handleReset">重置</el-button>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button type="danger" icon="el-icon-plus" @click="editconfig(null)">新增配置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="configMain" style="margin-top: 10px">
      <div class="tableContent">
        <el-table
          ref="configtable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="配置名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createtime"
            align="center"
            label="创建时间"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p>{{ getLocalTime(scope.row.updatetime) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="updatetime"
            label="更新时间"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p>{{ getLocalTime(scope.row.updatetime) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="170"
            align="center"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="editconfig(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" icon="el-icon-delete" @click="clickDeleteConfig(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部分页 -->
        <div class="bottom-pagination">
          <el-pagination
            :current-page.sync="pageNum"
            :page-sizes="[10, 15, 30, 50]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            background
            @size-change="handleSizeChange"
            @current-change="getConfigList">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  components: {
  },
  data() {
    return {
      showAutoDetail: false,
      queryForm: {
        configName: '',
        configTitle: ''
      },
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 20,
      tableData: [
      ],
      multipleSelection: [],
      currentPage: 1
    }
  },
  created() {
    this.getConfigList()
  },
  methods: {
    // js时间戳转日期格式
    getLocalTime(nS) {
      return moment(nS).format('YYYY-MM-DD HH:mm:ss')
    },
    // 获取配置列表
    getConfigList() {
      this.$http.get('/Config/list?offset=' + (this.pageNum - 1) * this.pageSize + '&limit=' + this.pageSize + '&title=' + this.queryForm.configTitle + '&name=' + this.queryForm.configName).then(response => {
        if ((response.data.code === 0)) {
          this.total = response.data.data.total
          this.tableData = response.data.data.rows
        }
      }).catch(error => {
        this.$message({
          showClose: true,
          message: '获取配置列表异常{' + error + '}',
          type: 'error'
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pageNum = 1
      this.getConfigList()
    },
    clickAutoDetail() {
      this.showAutoDetail = true
    },
    editconfig(config) {
      // 编辑
      this.$router.push({
        path: '/weixin/configedit',
        query: {
          id: config && config.id
        }
      })
    },
    // 查询操作
    handleQuery() {
      this.getConfigList()
    },
    handleReset() {
      this.queryForm.configName = ''
      this.queryForm.configTitle = ''
      this.getConfigList()
    },
    // 删除操作
    clickDeleteConfig(scope) {
      this.$confirm('此操作将永久删除 ' + scope.title + ' 该资源，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/Config/remove', { id: scope.id }).then(response => {
          if (response.data.code === 0) {
            this.getConfigList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }).catch(errMsg => {
          this.$message({
            type: 'error',
            message: '删除异常' + errMsg
          })
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.config {
  padding: 10px 20px;
  .configMainSearcch {
    padding: 18px 10px 0px 10px;
    background-color: white;
  }
  .configMain {
    padding: 10px;
    background-color: white;
  }
}
.el-dropdown-link {
  color: $color-primary;
  margin-left: 15px;
  cursor: pointer;
  font-size: $font-size-mini;
}
.bottom-pagination {
  text-align: right;
  margin-top: 20px;
}
.building-detail {
  min-height: 60vh;
  list-style: none;
  .item {
    color: $color-text-1;
    line-height: 1.4;
    label {
      color: $color-text-3;
      font-weight: 300;
      font-size: 15px;
      margin-right: 20px;
    }
  }
  .item + .item {
    margin-top: 12px;
  }
}
</style>

